<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import Home from '@/views/home/index.vue'
import { computed, provide, ref } from 'vue'

const bgUrl = ref('./../images/pad_anime_20.webp')
let containerBg = ref('')
provide('bgUrl', containerBg)
const url = new URL(bgUrl.value, import.meta.url).href
containerBg.value = 'url(' + url + ')'

const dynamicBg = ref('')
provide('dynamicBg', dynamicBg)
</script>

<template>
  <div class="dynamicWallPaper" v-if="dynamicBg">
    <video :src="dynamicBg" autoplay loop muted />
    <home class="home" />
    <RouterView />
  </div>

  <div v-else class="container">
    <home />
    <RouterView />
  </div>
</template>

<style scoped lang="less">
.container {
  position: relative;
  background-size: cover;
  background-image: v-bind(containerBg);
}

.container::after {
  // 添加背景虚化
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  opacity: 0.8;
  z-index: -1;
}

.container > * {
  z-index: 1;
}

.dynamicWallPaper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  video {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

.dynamicWallPaper::after {
  // 添加背景虚化
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  opacity: 0.8;
  z-index: -1;
}

.dynamicWallPaper > * {
  z-index: 1;
}
</style>
